<template>
  <div class="min-h-screen flex flex-col items-center justify-center bg-gradient-to-b from-yellow-200 to-orange-200">
    <h1 class="text-5xl font-extrabold mb-12 text-orange-800">欢乐斗地主</h1>

    <div class="flex flex-col space-y-6 w-64">
      <button class="bg-green-500 hover:bg-green-600 text-white py-4 rounded-xl text-xl font-semibold shadow"
              @click="$emit('start')">
        ▶ 开始游戏
      </button>

      <button class="bg-blue-500 hover:bg-blue-600 text-white py-4 rounded-xl text-xl font-semibold shadow"
              @click="$emit('rules')">
        📖 查看规则
      </button>

      <button class="bg-gray-600 hover:bg-gray-700 text-white py-4 rounded-xl text-xl font-semibold shadow"
              @click="$emit('settings')">
        ⚙ 设置
      </button>
    </div>
  </div>
</template>

<script setup>
// 提供事件给父组件处理
const emit = defineEmits(['start', 'rules', 'settings'])
</script>

<style scoped>
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
</style>